<template>
    <el-card style="margin-bottom:20px;">
        <div class="clearfix" slot="header">
            <span>About me</span>
        </div>
        <div class="user-profile">
            <div class="box-center">
                <avatar :height="'100px'" :hoverable="false" :image="src" :width="'100px'">
                    <i @click="uploadAvatar" class="el-icon-upload"
                       style="font-size: 28px; position:relative; top:19px; cursor: pointer"/>
                </avatar>
            </div>
            <div class="box-center">
                <div class="user-name text-center">{{ user.name }}</div>
                <div class="user-role text-center text-muted">{{ user.role}}</div>
            </div>
        </div>

        <div class="user-bio">
            <div class="user-education user-bio-section">
                <div class="user-bio-section-header">
                    <i :class="eduClass" @mouseleave="eduLeave" @mouseover="eduOver"
                       style="cursor: pointer"/>
                    <span>Education</span>
                </div>
                <div class="user-bio-section-body">
                    <div class="text-muted">
                        USC SoftWare Engine 2018
                    </div>
                </div>
            </div>

            <div class="user-skills user-bio-section">
                <div class="user-bio-section-header">
                    <i class="el-icon-s-opportunity"/>
                    <span>Skills</span></div>
                <div class="user-bio-section-body">
                    <div class="progress-item">
                        <span>Java</span>
                        <el-progress :percentage="80"/>
                    </div>
                    <div class="progress-item">
                        <span>UML</span>
                        <el-progress :percentage="50"/>
                    </div>
                    <div class="progress-item">
                        <span>C++</span>
                        <el-progress :percentage="30"/>
                    </div>
                    <div class="progress-item">
                        <span>Vue</span>
                        <el-progress :percentage="100" status="success"/>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="visible"
                   style="font-family: 'Microsoft YaHei UI',sans-serif"
                   title="上传图像" width="40%">
            <!--要配置header-->
            <el-upload :headers="importHeaders"
                       :limit="1"
                       :multiple="false"
                       :on-success="handleSuccess"
                       :with-credentials="true"
                       accept=".jpg,.png"
                       action="/api/user/uploadAvatar"
                       class="upload-demo"
                       drag
                       ref="upload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1M</div>
            </el-upload>
        </el-dialog>
    </el-card>
</template>

<script>
import avatar from '@/components/Avatar'
import {getToken, getUser, setUser} from "../../../store/session";
import {queryLoginUser} from "../../../store/user";

export default {
    components: {avatar},
    data() {
        return {
            visible: false,
            importHeaders: {token: getToken()},
            src: getUser().avatar,
            eduClass: 'el-icon-school',
            show: false,
        }
    },
    props: {
        user: {
            type: Object,
        }
    },
    methods: {
        uploadAvatar() {
            this.visible = true;
        }, //监听图片上传成功
        handleSuccess(response) {
            if (response.code === 200) {
                this.$message.success('上传成功');
                this.visible = false;
                this.src = response.data;
                /*更新信息，否则刷新后src是老版本*/
                queryLoginUser().then(rs => {
                    setUser(rs);
                })
            } else {
                this.$message.error('上传失败');
            }
            this.$refs.upload.clearFiles(); //清除文件列表
        }, eduOver() {
            this.eduClass = 'el-icon-edit';
        },
        eduLeave() {
            this.eduClass = 'el-icon-school'
        }
    }, mounted() {
        this.src = getUser().avatar;
    }
}
</script>

<style lang="scss" scoped>
    .box-center {
        margin: 0 auto;
        display: table;
    }

    .text-muted {
        color: #777;
    }

    .user-profile {
        .user-name {
            font-weight: bold;
        }

        .box-center {
            padding-top: 10px;
        }

        .user-role {
            padding-top: 10px;
            font-weight: 400;
            font-size: 14px;
        }

        .box-social {
            padding-top: 30px;

            .el-table {
                border-top: 1px solid #dfe6ec;
            }
        }

        .user-follow {
            padding-top: 20px;
        }
    }

    .user-bio {
        margin-top: 20px;
        color: #606266;

        span {
            padding-left: 4px;
        }

        .user-bio-section {
            font-size: 14px;
            padding: 15px 0;

            .user-bio-section-header {
                border-bottom: 1px solid #dfe6ec;
                padding-bottom: 10px;
                margin-bottom: 10px;
                font-weight: bold;
            }
        }
    }
</style>
